/* 暗黑方案1 */
:root {
  --current-background-color: var(--light-background-color);
  --current-card-background-color: var(--light-card-background-color);
  --current-primary-color: var(--light-primary-color);
  --current-second-title-color: var(--light-second-title-color);
  --current-second-title-select-color: var(--light-second-title-select-color);
  --current-third-title-color: var(--light-third-title-color);
  --current-divider-line-color: var(--light-divider-line-color);
  --current-slider-step-color: var(--light-slider-step-color);
  --current-slider-unselect-bg-color: var(--light-slider-unselect-bg-color);
  --current-slider-select-bg-color: var(--light-slider-select-bg-color);
  --current-switch-unselect-bg-color: var(--light-switch-unselect-bg-color);
  --current-switch-select-bg-color: var(--light-switch-select-bg-color);
  --current-fault-bg-color: var(--light-fault-bg-color);
  --current-fault-title-color: var(--light-fault-title-color);
  --current-warn-bg-color: var(--light-warn-bg-color);
  --current-warn-title-color: var(--light-warn-title-color);
  --current-setting-card-bg-color: var(--light-setting-card-bg-color);
  --current-dialog-mask-bg: var(--light-dialog-mask-bg);
  --current-list-dialog-select-bg-color: var(--light-list-dialog-select-bg-color);

  --current-titlebar-goback-src: var(--light-titlebar-goback-src);
  --current-titlebar-more-src: var(--light-titlebar-more-src);


  --light-background-color: #F1F3F5;
  --light-card-background-color: #ffffff;
  --light-primary-color: rgba(0, 0, 0, 0.9);
  --light-second-title-color: rgba(0, 0, 0, 0.6);
  --light-second-title-select-color: #0A59F7;
  --light-third-title-color: rgba(0, 0, 0, 0.4);
  --light-divider-line-color: rgba(0, 0, 0, 0.2);
  --light-slider-step-color: rgba(0, 0, 0, 0.2);
  --light-slider-unselect-bg-color: rgba(0, 0, 0, 0.1);
  --light-slider-select-bg-color: #0A59F7;
  --light-switch-unselect-bg-color: rgba(0, 0, 0, 0.1);
  --light-switch-select-bg-color: #0A59F7;
  --light-fault-bg-color: #FCE3DF;
  --light-fault-title-color: #E84026;
  --light-warn-bg-color: #FDEADE;
  --light-warn-title-color: #ED6F21;
  --light-setting-card-bg-color: #ffffff;
  --light-dialog-mask-bg: rgba(0, 0, 0, 0.2);
  --light-list-dialog-select-bg-color: rgba(10, 89, 247, 0.1);

  --light-titlebar-goback-src: url(../img/light/ic_back.png);
  --light-titlebar-more-src: url(../img/light/ic_more.png);

  --dark-background-color: #000000;
  --dark-card-background-color: #303030;
  --dark-primary-color: rgba(255, 255, 255, 0.86);
  --dark-second-title-color: rgba(255, 255, 255, 0.6);
  --dark-second-title-select-color: #5291ff;
  --dark-third-title-color: rgba(255, 255, 255, 0.4);
  --dark-divider-line-color: rgba(255, 255, 255, 0.2);
  --dark-slider-step-color: rgba(255, 255, 255, 0.2);
  --dark-slider-unselect-bg-color: rgba(255, 255, 255, 0.1);
  --dark-slider-select-bg-color: #317AF7;
  --dark-switch-unselect-bg-color: rgba(255, 255, 255, 0.1);
  --dark-switch-select-bg-color: #317AF7;
  --dark-fault-bg-color: #2b0e0b;
  --dark-fault-title-color: #D94838;
  --dark-warn-bg-color: #2C150D;
  --dark-warn-title-color: #DB6B42;
  --dark-setting-card-bg-color: #363636;
  --dark-dialog-mask-bg: rgba(0, 0, 0, 0.4);
  --dark-list-dialog-select-bg-color: rgba(82, 145, 255, 0.4);

  --dark-titlebar-goback-src: url(../img/dark/ic_back_dark.png);
  --dark-titlebar-more-src: url(../img/dark/ic_more_dark.png);

}

/* 暗黑方案2 */
/* :root {
  --current-background-color: #F1F3F5;
  --current-card-background-color: #ffffff;
  --current-primary-color: rgba(0, 0, 0, 0.9);
  --current-second-title-color: rgba(0, 0, 0, 0.6);
  --current-second-title-select-color: #0A59F7;
  --current-third-title-color: rgba(0, 0, 0, 0.4);
  --current-divider-line-color: rgba(0, 0, 0, 0.2);
  --current-slider-step-color: rgba(0, 0, 0, 0.2);
  --current-slider-unselect-bg-color: rgba(0, 0, 0, 0.1);
  --current-slider-select-bg-color: #0A59F7;
  --current-switch-unselect-bg-color: rgba(0, 0, 0, 0.1);
  --current-switch-select-bg-color: #0A59F7;
  --current-fault-bg-color: #FCE3DF;
  --current-fault-title-color: #E84026;

  --current-topImg-src: url(../img/bg_stool.png);
  --current-titlebar-goback-src: url(../img/light/ic_back.png);
  --current-titlebar-more-src: url(../img/light/ic_more.png);
}

:root[theme="dark"] {
  --current-background-color: #000000;
  --current-card-background-color: #303030;
  --current-primary-color: rgba(255, 255, 255, 0.86);
  --current-second-title-color: rgba(255, 255, 255, 0.6);
  --current-second-title-select-color: #5291ff;
  --current-third-title-color: rgba(255, 255, 255, 0.4);
  --current-divider-line-color: rgba(255, 255, 255, 0.2);
  --current-slider-step-color: rgba(255, 255, 255, 0.2);
  --current-slider-unselect-bg-color: rgba(255, 255, 255, 0.1);
  --current-slider-select-bg-color: #317AF7;
  --current-switch-unselect-bg-color: rgba(255, 255, 255, 0.1);
  --current-switch-select-bg-color: #317AF7;
  --current-fault-bg-color: #2b0e0b;
  --current-fault-title-color: #D94838;

  --current-topImg-src: url(../img/bg_stool.png);
  --current-titlebar-goback-src: url(../img/dark/ic_back_dark.png);
  --current-titlebar-more-src: url(../img/dark/ic_more_dark.png);
} */


/* -------------- 设备故障提示 ----------------*/
.faultContainer {
  height: 48px;
  width: 100%;
  background-color: var(--current-background-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.faultAlertContainer {
  height: 100%;
  width: 100%-24px;
  background-color: var(--current-fault-bg-color);
  flex-direction: row;
  align-items: center;
  display: flex;
  border-radius: 16px;
  margin-left: 12px;
  margin-right: 12px;
}

.faultAlertContainerForPad {
  height: 100%;
  width: 100%-48px;
  background-color: var(--current-fault-bg-color);
  flex-direction: row;
  align-items: center;
  display: flex;
  border-radius: 16px;
  margin-left: 24px;
  margin-right: 24px;
}

.faultAlertText {
  margin-left: 17px;
  color: var(--current-fault-title-color);
  font-weight: 400;
  font-size: 16px;
  flex: 1;
}

.faultAlertLeft {
  margin-left: 12px;
  height: 24px;
  width: 24px;
}

.faultAlertRight {
  margin-right: 14px;
  height: 24px;
  width: 12px;
}

/* ------------开关按钮 --------------*/
.devStatus {
  width: 100%;
  height: 88px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 16px;
  background-color: var(--current-card-background-color);
}

.devStatus .statusItem {

  height: 100%;
  display: flex;
  /* background-color: #ff0000; */
}

.devStatus .leftItem {
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
  display: flex;
}

.devStatus .leftItemForPad {
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  /* background-color: #00ff00; */
}

.devStatus .leftTitle {
  font-size: 18px;
  color: var(--current-primary-color);
}

.devStatus .centerItem {
  flex: 1;
  height: 100%;
  display: flex;
  /* background-color: #0000ff; */
}

.devStatus .rightItem {
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-right: 16px;
  display: flex;
}

.devStatus .rightItemForPad {
  flex: 1;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.devStatus .statusImg {
  width: 48px;
  height: 48px;
}

.devStatus .statusImg:active {
  opacity: 0.3;
}

/* ------------开关按钮(大屏) --------------*/
.devStatusForPad .leftForPad {
  flex: 1;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


/*----------------- 功能按钮区 ------------------*/
.devInfo {
  width: 100%;
  margin-top: 12px;
  /* padding-left: 8px;
  padding-right: 8px; */
  height: 88px;
  border-radius: 16px;
  background: var(--current-card-background-color);
  /* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03); */
}

.devInfoPadding {
  width: 100%-16px;
  height: 100%;
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.btnContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: transparent; */
  /* background: rgba(255,255,0,0.5); */
}

/* .btnContainer:active {
  opacity: 0.3;
} */

.btnContainer .infoName {
  font-size: 12px;
  color: var(--current-second-title-color);
  margin-top: 4px;
}

.btnContainer .infoNameSelected {
  font-size: 12px;
  color: var(--current-second-title-select-color);
  margin-top: 4px;
}

.btnContainer .nameContainer{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btnContainer .infoTop {
  margin-top: 16px;
}

.btnContainer .infoImg {
  width: 40px;
  height: 40px;
}

.btnContainer .infoImg:active {
  opacity: 0.3;
}

.btnContainer .bottomNameContainer{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* .btnContainer .infoImg:active{
  src: rgba(0, 0, 0, 0.3);
} */
.devInfoBody {
  width: 100%-16px;
  height: 60px;
  padding-left: 8px;
  padding-right: 8px;
  /* background: var(--current-card-background-color); */
  background-color: rgba(255, 255, 0, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.devInfoBody-part1 {
  width: 100%;
  height: 12px;
  background: var(--current-card-background-color);
  /* background-color: #00ff00; */
}

.devInfoBody-part2 {
  width: 100%;
  height: 16px;
  background: var(--current-card-background-color);
}

/* .devInfoSecondLine {
  width: 100%;
  height: 76px;
  background: white;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
} */

/*---------------- 卡片折叠/展开 --------------------*/

.collapseContainer {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 12px;
  margin-bottom: 12px;
}

.collapseContent {
  display: flex;
  width: 100%;
  flex-direction: column;
}


.mainCard {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.mainCard .moreOpenDivider {
  width: 100%;
  height: 12px;
  background: var(--current-card-background-color);
}

.modeCardContainer {
  display: flex;
  width: 100%;
  height: 88px;
  flex-direction: column;
  background-color: var(--current-card-background-color);
  border-radius: 16px;
}

.modeCardContainerWashing {
  display: flex;
  width: 100%;
  height: 88px;
  flex-direction: column;
  background-color: #fff;
  /* background-color: #FF0000; */
}

.card-top {
  width: 100%;
  height: 16px;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  /* background: var(--current-card-background-color); */
}

.card-bottom {
  width: 100%;
  height: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  background: var(--current-card-background-color);
}

/* .card-content {
  height: 200px;
  width: 100%;
  background: #fff;
} */

.devideLineContainer {
  height: 0.25px;
  width: 100%;
  background-color: var(--current-card-background-color);
}

.devideLineContainer .devider-line {
  height: 100%;
  width: 100%-32px;
  margin-left: 16px;
  margin-right: 16px;
  background-color: var(--current-divider-line-color);
}

/*---------------长条按钮---------------*/
.longBtn {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--current-card-background-color);
}

.longBtn .left {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 16px;
}

.longBtn .left .title {
  font-size: 16px;
  color: var(--current-third-title-color);
}

.longBtn .left .myselet {
  color: var(--current-primary-color);
}

.longBtn .left .state {
  font-size: 12px;
  color: var(--current-second-title-color);
}

.longBtn .rightImg {
  margin-right: 16px;
  width: 24px;
  height: 24px;
}

.longBtn .switch {
  margin-right: 16px;
}

/* .longBtn:active {
  opacity: 0.4;
} */

/*------------------ 滑条区 ----------------- */
.smallSlideCard {
  display: flex;
  width: 100%;
  height: 64px;
  flex-direction: row;
  background: var(--current-card-background-color);
  /* background: #ff0000; */
}

.smallSlideCard .slideContainer{
  flex: 1;
  width: 100px;
  height: 100%;
  display: flex;
}

.slideCard {
  display: flex;
  width: 100%;
  height: 64px;
  margin-top: 12px;
  border-radius: 16px;
  flex-direction: row;
  background: var(--current-card-background-color);
}

.slideCard .shadow{
  position: relative;
  margin-left: -500px;
  width: 500px;
  height: 64px;
  background: rgba(0,0,0,0);
}

.smallSlideCard .shadow{
  position: relative;
  margin-left: -500px;
  width: 500px;
  height: 64px;
  background: rgba(0,0,0,0);
}

.slideCardTransparent {
  background: rgba(255, 255, 255, 0.4);
}

.slideInfo {
  height: 100%;
  width: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
  /* background-color: #00ff00; */
}

.slideTitle {
  color: var(--current-primary-color);
  font-size: 16px;
}

.slideTitleEn {
  color: var(--current-primary-color);
  font-size: 12px;
}

.slideState {
  color: var(--current-second-title-color);
  font-size: 12px;
  margin-top: 2px;
}

.slideStateEn {
  color: var(--current-second-title-color);
  font-size: 10px;
  margin-top: 2px;
}

.mySlider {
  flex: 1;
  width: 100px;
  height: 30px;
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 20px;
  /* background-color: #ff0000; */
}

.mySliderEn {
  flex: 1;
  width: 100px;
  height: 30px;
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 14px;
  /* background-color: #ff0000; */
}

.mySliderPad {
  flex: 1;
  width: 100px;
  height: 30px;
  margin-left: 8px;
  margin-right: 16px;
  margin-top: 16px;
  /* background-color: #ff0000; */
}

.sliderContainer {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  margin-right: 15px;
}

.custom-dot {
  width: 14px;
  height: 14px;
  /* margin-top: -5px; */
  border-radius: 14px;
  background-color: pink;
  /* transition: all 0.3s; */
}

.custom-label {
  /* color: rgba(0, 0, 0, 0.6); */
  font-size: 15px;
  /* white-space: nowrap; */
  /* margin-left: 5px; */
  /* font-stretch: normal; */
}

.vue-slider-mark-label {
  color: var(--current-second-title-color);
  font-size: 10px;
  white-space: nowrap;
  /* font-stretch: normal; */
}

.vue-slider-mark-label.active {
  color: var(--current-second-title-color);
  font-size: 10px;
  white-space: nowrap;
}

.custom-label.active {
  color: var(--current-second-title-color);
  font-size: 10px;
  white-space: nowrap;
}

.custom-tooltip {
  transform: translateY(5px);
}

.custom-tooltip.focus {
  font-weight: bold;
}

.custom-step {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
  /* box-shadow: 0 0 0 3px #ccc; */
  background-color: var(--current-slider-step-color);
}

.custom-step-hidden {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
  /* box-shadow: 0 0 0 3px #ccc; */
  background-color: rgba(0, 0, 0, 0.0);
}

.custom-step.active {
  /* box-shadow: 0 0 0 3px #3498db; */
  background-color: var(--current-slider-select-bg-color);
}

/*------------- 展示更多 -------------*/
.moreDeviceContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 28px;
  background-color: var(--current-card-background-color);
  /* background-color: #00ff00; */
}

.moreDeviceContent {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.moreDeviceText {
  font-size: 14px;
  font-weight: 400;
  color: var(--current-second-title-color);
}

.moreDeviceImg {
  width: 24px;
  height: 12px;
  margin-left: 2px;
}

/*------------------ 耗材区 ----------------- */
.materialCard {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--current-card-background-color);
  border-radius: 16px;
}

.materialCard .titleContainer {
  width: 100%;
  height: 48px;
  flex-direction: row;
  align-items: center;
  display: flex;
  /* background-color: #000000; */
}

.materialCard .titleContainer .title {
  font-size: 16px;
  font-weight: 400;
  margin-left: 16px;
  color: var(--current-primary-color);
}

.materialCard .itemContainer {
  width: 100%;
  height: 48px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  display: flex;
  /* background-color: #00ff00; */
}

.materialCard .itemContainer:active {
  opacity: 0.3;
}

.materialCard .itemContainer .title {
  font-size: 16px;
  font-weight: 400;
  margin-left: 16px;
  color: var(--current-primary-color);
}

.materialCard .itemContainer .state {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: end; */
  /* background-color: #0000ff; */
}

.materialCard .itemContainer .state .label {
  font-size: 14px;
  font-weight: 400;
  color: var(--current-second-title-color);
}

.materialCard .itemContainer .state .value {
  font-size: 14px;
  font-weight: 400;
  margin-left: 3px;
  color: var(--current-second-title-color);
}

.materialCard .itemContainer .state .img {
  width: 12px;
  height: 24px;
  margin-right: 16px;
  margin-left: 4px;
}

.materialCard .filterContainer {
  width: 100%;
  height: 64px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  display: flex;
  /* background-color: #00ff00; */
}

.materialCard .filterContainer:active {
  opacity: 0.3;
}

.materialCard .filterContainer .filterTitleContainer{
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.materialCard .filterContainer .filterTitleContainer .title {
  font-size: 16px;
  color: var(--current-primary-color);
}
.materialCard .filterContainer .filterTitleContainer .subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--current-second-title-color);
}

.materialCard .filterContainer .state {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: end; */
  /* background-color: #0000ff; */
}

.materialCard .filterContainer .state .label {
  font-size: 14px;
  font-weight: 400;
  color: var(--current-second-title-color);
}

.materialCard .filterContainer .state .value {
  font-size: 14px;
  font-weight: 400;
  margin-left: 3px;
  color: var(--current-second-title-color);
}

.materialCard .filterContainer .state .img {
  width: 12px;
  height: 24px;
  margin-right: 16px;
  margin-left: 4px;
}

/* --------------单卡片按钮------------- */
.singleCard {
  display: flex;
  border-radius: 16px;
  width: 100%;
  height: 64px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--current-card-background-color);
}

.singleCard .titleContainer {
  margin-left: 16px;
  flex-direction: column;
}

.singleCard .state {
  font-size: 12px;
  color: var(--current-second-title-color);
  font-weight: 500;
  margin-top: 2px;
}

.singleCard .title {
  font-size: 16px;
  font-weight: 500;
  color: var(--current-primary-color);
}

.singleCard:active {
  opacity: 0.3;
}

.singleCard .img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}


/*---------------并排卡片按钮组---------------*/
.doubleCardContainer {
  margin-top: 12px;
  height: 64px;
  flex-direction: row;
  display: flex;
  width: 100%;
  /* background-color: rgba(0, 0, 0, 1); */
}

.doubleCardContainer .card {
  flex: 1;
  display: flex;
  height: 100%;
  border-radius: 16px;
  background-color: var(--current-card-background-color);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.doubleCardContainer .card:active {
  opacity: 0.3;
}

.doubleCardContainer .card .img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

.doubleCardContainer .card .titleContainer {
  margin-left: 16px;
  flex-direction: column;
}

.doubleCardContainer .card .titleContainer .state {
  font-size: 12px;
  color: var(--current-second-title-color);
  font-weight: 500;
  margin-top: 2px;
}

.doubleCardContainer .card .titleContainer .title {
  font-size: 16px;
  color: var(--current-primary-color);
  font-weight: 500;
}

.doubleCardContainer .dividers {
  width: 12px;
  height: 100%;
}

/* --------------- 功能设置 ----------------*/
.funcSetting {
  margin-top: 12px;
  width: 100%;
  border-radius: 16px;
  background-color: var(--current-card-background-color);
}

.funcSetting .layer {
  height: 64px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.funcSetting .layer .title {
  color: var(--current-primary-color);
  font-size: 16px;
  font-weight: 400;
  margin-left: 16px;
}

.funcSetting .layer .arrow {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

/* ---------------滑条部分 ----------------*/
.sliderBar {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
}

.dark .sliderBar {
  background: #262626;
}

.sliderBar .sliderWrap {
  width: 20%;
  position: absolute;
  left: 24px;
  margin-right: 8px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.sliderBar .sliderWrap .sliderName {
  font-size: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.9);
}

.dark .sliderBar .sliderWrap .sliderName {
  color: rgba(255, 255, 255, 0.86);
}

.sliderBar .sliderWrap .sliderStatus {
  font-size: 1.2rem;
  color: #007DFF;
}

.dark .sliderBar .sliderWrap .sliderStatus {
  color: #3F97E9;
}

.rangWrap {
  width: calc(80% - 56px);
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.rang {
  position: relative;
  height: 24px;
}

.stripLeft {
  position: absolute;
  width: 20px;
  height: 2px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background: #007DFF;
  border-radius: 50px 0 0 50px;
  z-index: 2;
}

.dark .stripLeft {
  background: #006CDE;
}

.stripRight {
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0 50px 50px 0;
}

.dark .stripRight {
  background: rgba(255, 255, 255, 0.1);
}

.slider {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 20px;
  width: 24px;
  height: 24px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 9;
  touch-action: none;
}

/* ---------------离线---------------- */
.outline {
  opacity: 0.4;
}
